<template>
  <view class="oiling-page">

    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <input 
          class="search-input" 
          placeholder="输入需要搜索的内容" 
          v-model="searchKeyword"
          @input="onSearchInput"
        />
        <image src="/static/static-lj/搜索.png" class="search-icon" />
      </view>
      <button class="map-mode-btn" @click="toggleMapMode">
        地图模式
      </button>
    </view>

    <!-- 油品类型筛选 -->
    <view class="filter-section">
      <view class="fuel-filters">
        <view 
          v-for="(fuel, index) in fuelTypes" 
          :key="index"
          :class="['fuel-filter', { active: selectedFuel === fuel }]"
          @click="selectFuel(fuel)"
        >
          {{ fuel }}
        </view>
      </view>
    </view>

    <!-- 加油站列表 -->
    <view class="station-list" v-if="!isMapMode">
      <view 
        v-for="(station, index) in filteredStations" 
        :key="index"
        class="station-card"
        @click="goToStoreDetails(station)"
      >
        <view class="station-header">
          <text class="station-name">{{ station.name }}</text>
          <text class="station-distance">{{ station.distance }}m</text>
        </view>
        
        <view class="station-promotions">
          <view 
            v-for="(promo, pIndex) in station.promotions" 
            :key="pIndex"
            class="promo-tag"
          >
            {{ promo }}
          </view>
        </view>

        <view class="station-content">
          <image :src="station.image" class="station-image" />
          <view class="station-details">
            <view class="business-hours">{{ station.businessHours }}</view>
            <view class="price">¥ {{ station.price }}/升</view>
            <view class="address">
              <text>{{ station.address }}</text>
              <image 
                src="/static/static-lj/plane.png" 
                class="plane-icon" 
                @click.stop="navigateToStation(station)"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    

    <!-- 空状态 -->
    <view v-if="filteredStations.length === 0 && !isMapMode" class="empty-state">
      <image src="/static/static-lj/组 8.png" class="empty-icon" />
      <text class="empty-text">附近暂无加油站</text>
      <text class="empty-desc">请尝试扩大搜索范围或切换油品类型</text>
      <button class="retry-btn" @click="refreshData">重新搜索</button>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      isMapMode: false,
      selectedFuel: '92#',
      fuelTypes: ['90#', '92#', '93#', '95#', '97#', '98#'],
      mapCenter: {
        latitude: 35.2394,
        longitude: 113.2331
      },
      stations: [
        {
          id: 1,
          name: '中国石油加油站',
          distance: 556,
          promotions: ['满200减20', '满500减60'],
          image: '/static/static-lj/加油站01.png',
          businessHours: '营业时间: 周一至周五',
          price: '5.66',
          address: '山阳区人民路与解放路交叉口',
          latitude: 35.2404,
          longitude: 113.2341,
          fuelTypes: ['90#', '92#', '93#', '95#', '97#', '98#']
        },
        {
          id: 2,
          name: '中国石油加油站',
          distance: 880,
          promotions: ['满200减20', '满500减60'],
          image: '/static/static-lj/加油站01.png',
          businessHours: '营业时间: 周一至周五',
          price: '5.66',
          address: '山阳区人民路与解放路交叉口',
          latitude: 35.2414,
          longitude: 113.2351,
          fuelTypes: ['90#', '92#', '93#', '95#', '97#', '98#']
        },
        {
          id: 3,
          name: '中国石化加油站',
          distance: 1200,
          promotions: ['满300减30', '新用户立减10元'],
          image: '/static/static-lj/加油站01.png',
          businessHours: '营业时间: 24小时',
          price: '5.68',
          address: '解放区建设路与民主路交叉口',
          latitude: 35.2424,
          longitude: 113.2361,
          fuelTypes: ['92#', '95#', '98#']
        },
        {
          id: 4,
          name: '壳牌加油站',
          distance: 1500,
          promotions: ['满400减50', '积分兑换'],
          image: '/static/static-lj/加油站01.png',
          businessHours: '营业时间: 6:00-22:00',
          price: '5.70',
          address: '中站区解放西路与建设路交叉口',
          latitude: 35.2434,
          longitude: 113.2371,
          fuelTypes: ['92#', '95#', '98#']
        },
        {
          id: 5,
          name: '中化石油加油站',
          distance: 2000,
          promotions: ['满150减15', '会员专享'],
          image: '/static/static-lj/加油站01.png',
          businessHours: '营业时间: 6:30-21:30',
          price: '5.65',
          address: '马村区建设东路与文昌路交叉口',
          latitude: 35.2444,
          longitude: 113.2381,
          fuelTypes: ['90#', '92#', '95#']
        },
        {
          id: 6,
          name: '延长石油加油站',
          distance: 2500,
          promotions: ['满100减10', '首次加油优惠'],
          image: '/static/static-lj/加油站01.png',
          businessHours: '营业时间: 24小时',
          price: '5.62',
          address: '修武县云台大道与丰收路交叉口',
          latitude: 35.2454,
          longitude: 113.2391,
          fuelTypes: ['92#', '95#', '98#']
        }
      ]
    }
  },
  computed: {
    filteredStations() {
      let result = this.stations;
      
      // 按油品类型筛选
      if (this.selectedFuel) {
        result = result.filter(station => 
          station.fuelTypes && station.fuelTypes.includes(this.selectedFuel)
        );
      }
      
      // 按搜索关键词筛选
      if (this.searchKeyword) {
        result = result.filter(station => 
          station.name.includes(this.searchKeyword) || 
          station.address.includes(this.searchKeyword)
        );
      }
      
      // 按距离排序
      return result.sort((a, b) => a.distance - b.distance);
    }
  },
  onLoad() {
    console.log('oiling.vue 页面加载完成，确认没有任何跳转逻辑');
    console.log('当前时间:', new Date().toLocaleTimeString());
    this.initMapMarkers();
  },
  methods: {
    // 搜索输入
    onSearchInput() {
      console.log('搜索关键词:', this.searchKeyword);
    },
    
    // 切换地图模式
    toggleMapMode() {
      console.log('切换到地图模式');
      uni.navigateTo({
        url: '/index-item/gas-station/map',
        success: () => {
          console.log('跳转到地图页面成功');
        },
        fail: (err) => {
          console.log('跳转到地图页面失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 选择油品类型
    selectFuel(fuel) {
      this.selectedFuel = fuel;
      console.log('选择油品类型:', fuel);
    },
    
    
    // 导航到加油站
    navigateToStation(station) {
      if (!station) {
        uni.showToast({
          title: '请先选择加油站',
          icon: 'none'
        });
        return;
      }
      
      console.log('导航到加油站:', station);
      uni.navigateTo({
        url: `/index-item/gas-station/navigation?stationId=${station.id}&name=${encodeURIComponent(station.name)}&address=${encodeURIComponent(station.address)}&latitude=${station.latitude}&longitude=${station.longitude}`,
        success: () => {
          console.log('跳转到导航页面成功');
        },
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 跳转到门店详情页面
    goToStoreDetails(station) {
      if (!station) {
        uni.showToast({
          title: '请先选择加油站',
          icon: 'none'
        });
        return;
      }
      
      console.log('跳转到门店详情页面:', station);
      uni.navigateTo({
        url: `/index-item/gas-station/store-details?stationId=${station.id}&name=${encodeURIComponent(station.name)}&address=${encodeURIComponent(station.address)}&latitude=${station.latitude}&longitude=${station.longitude}&price=${station.price}&image=${encodeURIComponent(station.image)}`,
        success: () => {
          console.log('跳转到门店详情页面成功');
        },
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    
    
    
    // 初始化地图标记
    initMapMarkers() {
      this.mapMarkers = this.stations.map(station => ({
        id: station.id,
        latitude: station.latitude,
        longitude: station.longitude,
        iconPath: '/static/static-lj/gas-station-marker.png',
        width: 30,
        height: 30,
        callout: {
          content: station.name,
          color: '#fff',
          fontSize: 12,
          bgColor: '#0a78ff',
          padding: 8,
          borderRadius: 8,
          display: 'ALWAYS'
        }
      }));
    },
    
    // 更新地图标记
    updateMapMarkers() {
      this.$nextTick(() => {
        this.initMapMarkers();
      });
    },
    
    // 地图点击事件
    onMapTap(e) {
      console.log('地图点击:', e);
    },
    
    // 刷新数据
    refreshData() {
      uni.showLoading({
        title: '重新搜索中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '搜索完成',
          icon: 'success'
        });
      }, 1500);
    }
  }
}
</script>

<style scoped>
.oiling-page {
  background: #f5f5f5;
  min-height: 100vh;
  position: relative;
}

/* 页面背景色区域 - 顶部蓝色区域 */
.oiling-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 350rpx; /* 蓝色区域高度 */
  background-color: #3184FD;
  z-index: 0; /* 在页面内容下方 */
}


/* 搜索区域 */
.search-section {
  position: relative;
  z-index: 10;
  background: transparent;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-top: -20rpx;
}

.search-bar {
  flex: 1;
  background: #fff;
  border-radius: 25rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  height: 70rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  border: none;
  outline: none;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-left: 10rpx;
}

.map-mode-btn {
  background: #ff6a2f;
  color: #fff;
  border: none;
  border-radius: 25rpx;
  padding: 0 20rpx;
  height: 70rpx;
  font-size: 24rpx;
  white-space: nowrap;
  min-width: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 筛选区域 */
.filter-section {
  position: relative;
  z-index: 10;
  background: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  margin: 0 20rpx;
  border-radius: 16rpx 16rpx 0 0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.fuel-filters {
  display: flex;
  gap: 15rpx;
  overflow-x: auto;
  padding-bottom: 5rpx;
}

.fuel-filter {
  background: #fff;
  border: 2rpx solid #0a78ff;
  color: #0a78ff;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  white-space: nowrap;
  transition: all 0.3s ease;
  min-width: 80rpx;
  text-align: center;
}

.fuel-filter.active {
  background: #0a78ff;
  color: #fff;
}

/* 加油站列表 */
.station-list {
  position: relative;
  z-index: 10;
  padding: 0 20rpx 20rpx;
  background: #f5f5f5;
  margin-top: -1rpx;
}

.station-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  position: relative;
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.station-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.station-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.station-distance {
  font-size: 28rpx;
  color: #0a78ff;
  font-weight: 600;
}

.station-promotions {
  display: flex;
  gap: 10rpx;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
}

.promo-tag {
  background: linear-gradient(135deg, #ff6a2f 0%, #ff8c42 100%);
  color: #fff;
  border-radius: 20rpx;
  padding: 8rpx 16rpx;
  font-size: 22rpx;
  white-space: nowrap;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(255, 106, 47, 0.3);
}

.station-content {
  display: flex;
  gap: 20rpx;
  align-items: flex-start;
}

.station-image {
  width: 120rpx;
  height: 80rpx;
  border-radius: 8rpx;
  background: #f0f0f0;
  flex-shrink: 0;
}

.station-details {
  flex: 1;
  position: relative;
  padding-right: 80rpx;
}

.business-hours {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.price {
  font-size: 36rpx;
  color: #ff4757;
  font-weight: 700;
  margin-bottom: 8rpx;
  text-shadow: 0 1rpx 2rpx rgba(255, 71, 87, 0.2);
}

.address {
  font-size: 24rpx;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.plane-icon {
  width: 24rpx;
  height: 24rpx;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.plane-icon:active {
  transform: scale(0.9);
}

.navigation-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 60rpx;
  height: 60rpx;
  background: #0a78ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(10, 120, 255, 0.3);
}

.nav-text {
  color: #fff;
  font-size: 24rpx;
  font-weight: 500;
}

/* 地图模式 */
.map-container {
  height: 600rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.gas-map {
  width: 100%;
  height: 100%;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  text-align: center;
}

.empty-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.empty-desc {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.retry-btn {
  background: #0a78ff;
  color: #fff;
  border: none;
  border-radius: 25rpx;
  padding: 16rpx 32rpx;
  font-size: 28rpx;
}

</style>